<template>
	<view class="detailsmain">
		<view class="hotimg">
			<image :src="goodsimages" mode=""></image>
		</view>
		<view class="two">
			<view class="Setmeal">
				<text>{{goodsname}}</text>
			</view>
			<view class="aboutmoney">
				<text style="font-size: 20rpx;color: #000000;">￥</text>
				<text style="color: #FF6633;font-size: 34rpx;font-weight: bold;">{{Number(goodpresent).toFixed(2)}}</text>
				<text style="color: #999999;font-size: 20rpx;font-weight:bold;text-decoration: line-through;margin-left: 20rpx;">￥{{Number(goodsold).toFixed(2)}}</text>
			</view>
			<view class="chargeback">
				<text style="color: #FFC300;font-size: 28rpx;">随时退</text>
				<text class="distri">{{distribution==0?'分销':'不分销'}}</text>
			</view>
			<view class="enjoy">
				<button class="same" open-type='share' @click="share()">一键分享</button>
				<view class="same" @click="go">
					<text>立刻抢购</text>
				</view>
			</view>
		</view>
		<view class="shoptalk">
			<view class="tag">
				<view class="yellowtag">
					<view class="yellow"  v-for="(item,index) in tipsList" :key="index">
						<text>{{item}}</text>
					</view>
				</view>
				<!-- <view class="blacktag">
					<text>不新鲜24</text>
				</view> -->
			</view>
		</view>
		<view class="like" style="width: 100%;">
			<view class="liketitle">
				<image class="liketitle-img" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/left.png" mode=""></image>
				<text style="color: #FFC30E;font-size: 28rpx;margin-left: 10rpx;margin-right: 10rpx;">你可能还喜欢</text>
				<image class="liketitle-img" src="https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/right.png" mode=""></image>
			</view>
			<view class="likegoods">
				<view class="zy_content">
					<view v-for="item in likeList" :key="item" class="zy_card">
						<image @tap="touch_card" :data-id="item.id" :src="item.images" :key="item" @click="godetails(item.id)" mode="widthFix"></image>
						<view @tap="touch_card" :data-id="citem.id" class="zy_bottom_view">
							<text class="zy_title">{{item.commodityName}}</text>
							<text class="zy_money">¥ {{item.currentPrice}}</text>
							<text class="zy_old">¥ {{item.originalPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsimages: '',
				goodsname: '',
				goodsold: '',
				goodpresent: '',
				salesVolume: '',
				commentEvaluate: '',
				commentCount: '',
				tipsList: [],
				likeList: [],
				distribution: '',
			}
		},
		onLoad(option) {
			// 商品详情界面
			this.optionId = option.sid
			const requestAboutgoods = {
				url: `/api/commodity/details/${this.optionId}`,
				method: "get",
				callBack: (res) => {
					console.log(res.data)
					this.text = 'request success';
					this.goodsimages = res.data.images
					this.goodsname = res.data.commodityName
					this.goodsold = res.data.originalPrice
					this.goodpresent = res.data.currentPrice
					this.salesVolume = JSON.stringify(res.data.salesVolume)
					this.commentEvaluate = JSON.stringify(res.data.commentEvaluate)
					this.commentCount = JSON.stringify(res.data.commentCount)
					this.distribution = res.data.distribution
				}
			}
			this.$http.request(requestAboutgoods,true)
			
			this.gettips()
			this.getRecommend()
		},
		methods: {
			// 商品随机推荐
			getRecommend(){
				const requestRecommend = {
					url: `/api/commodity/randomCommodity/1/2`,
					method: "get",
					callBack: (res) => {
						this.text = 'request success';
						this.likeList = res.data
					}
				}
				this.$http.request(requestRecommend)
			},
			
			gettips(){
				const requestTips = {
					url: `/api/commodity/tips`,
					method: "get",
					callBack: (res) => {
						this.text = 'request success';
						this.tipsList = res.data;
						// console.log(this.tipsList)
					}
				}
				this.$http.request(requestTips,true)
			},
			
			go() {
				uni.navigateTo({
					url: './Purchase?pay=' + this.optionId
				})
			},
			share() {
				wx.showShareMenu()
			}
		}
	}
</script>

<style>
	.distri{
		color: #333333;
		margin-left: 20rpx;
		display: inline-block;
		width: 104rpx;
		height: 32rpx;
		border: 2rpx solid #FFC300;
		font-size: 20rpx;
		color: #FFC300;
		border-radius: 20rpx;
		line-height: 32rpx;
		text-align: center;
		margin-top: 8rpx;
	}
	
	.detailsmain {
		height: 100vh;
		background-color: #F1F1F1;
		width: 100%;
		position: relative;
	}

	.hotimg image {
		width: 100%;
		height: 872rpx;
	}

	.detailsmain .two {
		width: 710rpx;
		height: 176rpx;
		margin-left: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		position: absolute;
		top: 715rpx;
	}

	.Setmeal {
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.aboutmoney {
		margin-top: 7rpx;
		margin-left: 16rpx;
	}

	.chargeback {
		margin-top: 7rpx;
		margin-left: 19rpx;
	}

	.enjoy {
		position: absolute;
		top: 36rpx;
		left: 528rpx;
	}

	.same {
		width: 158rpx;
		height: 48rpx;
		border-radius: 10rpx;
		background-color: #FFC300;
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
		text-align: center;
		line-height: 48rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}

	.shoptalk {
		width: 710rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.aboutgoods {
		height: 80rpx;
		width: 100%;
		border-bottom: 2rpx solid #EEEEEE;
		line-height: 80rpx;
		display: flex;
		align-items: center;
	}

	.yellowtag {
		display: flex;
		flex: row;
	}

	.yellow {
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
		background-color: #FFF5E6;
		color: #FFC300;
		font-size: 28rpx;
		text-align: center;
		margin-top: 20rpx;
		margin-left: 20rpx;

	}

	.blacktag {
		width: 136rpx;
		height: 48rpx;
		border: 2rpx solid #999999;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
		line-height: 48rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-left: 12rpx;
	}

	.like {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.liketitle-img {
		width: 48rpx;
		height: 4rpx;
		margin-bottom: 4rpx;
	}

	.liketitle {
		margin-left: 32%;
		margin-bottom: 20rpx;
	}

	.likegoods image {
		width: 360rpx;
		height: 250rpx;
		float: left;
	}
	.zy_content {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
		position: relative;
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	
	.zy_list {
		width: 45%;
		display: flex;
		flex-direction: column;
	}
	
	.zy_card {
		width: 344rpx;
		background-color: #fefefe;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 1px 1px 5px gray;
		margin-top: 20rpx;
	}
	
	.zy_card image {
		width: 344rpx;
		height: 352rpx !important;
		margin-bottom: 5rpx;
	}
	
	/* 底部卡片内容 */
	.zy_bottom_view {
		width: 100%;
		min-height: 100rpx;
		background-color: #fff;
		margin-bottom: 15rpx;
	}
	
	.zy_title {
		display: inline-block;
		width: 90%;
		max-height: 70rpx;
		margin-left: 5%;
		margin-top: 10rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #252525;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.zy_money {
		display: block;
		width: 90%;
		margin-left: 5%;
		margin-top: 52rpx;
		color: #f35d3c;
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.zy_old {
		display: block;
		width: 90%;
		margin-left: 40%;
		color: #acacac;
		font-size: 20rpx;
		margin-top: -30rpx;
		text-decoration: line-through;
	}
</style>
